<template>
  <div class="page bg-white">
    <el-row>
      <el-button
        v-if="hasPermission('lhyg:lgy:goodsclassify:goodsClassify:add')"
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="add()"
        >新建</el-button
      >
    </el-row>
    <el-table
      :cell-style="cellStyle"
      style="border: 1px solid #d6cfe2"
      :header-cell-class-name="cellHeadStyle"
      :row-class-name="tableRowClassName"
      :data="dataList"
      isBigData
      isTable
      size="small"
      v-loading="loading"
      row-key="id"
      class="table table"
    >
      <el-table-column prop="name" show-overflow-tooltip label="名称">
      </el-table-column>
      <el-table-column prop="grade" show-overflow-tooltip label="等级">
        <template slot-scope="scope">
          {{
            $dictUtils.getDictLabel("sys_office_grade", scope.row.grade, "-")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="isBrand" show-overflow-tooltip label="是否品牌">
        <template slot-scope="scope">
          {{ $dictUtils.getDictLabel("yes_no", scope.row.isBrand, "-") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="isrecommend"
        show-overflow-tooltip
        label="是否推荐"
      >
        <template slot-scope="scope">
          {{
            $dictUtils.getDictLabel("isremen_type", scope.row.isrecommend, "-")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="remarks" show-overflow-tooltip label="备注信息">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        :key="Math.random()"
        width="350"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="hasPermission('lhyg:lgy:goodsclassify:goodsClassify:view')"
            type="text"
            size="mini"
            icon="el-icon-view"
            @click="view(scope.row.id)"
            >查看</el-button
          >
          <el-button
            v-if="hasPermission('lhyg:lgy:goodsclassify:goodsClassify:edit')"
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="edit(scope.row.id)"
            >修改</el-button
          >
          <el-button
            v-if="hasPermission('lhyg:lgy:goodsclassify:goodsClassify:del')"
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row.id)"
            >删除</el-button
          >
          <el-button
            v-if="hasPermission('lhyg:lgy:goodsclassify:goodsClassify:add')"
            type="text"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="addChild(scope.row.id, scope.row.name)"
            >添加下级商品分类</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <GoodsClassifyForm
      ref="goodsClassifyForm"
      @refreshDataList="refreshList"
    ></GoodsClassifyForm>
  </div>
</template>

<script>
import tableStyles from "../../../../../utils/mixins.js";
import GoodsClassifyForm from "./GoodsClassifyForm";
export default {
  mixins: [tableStyles],
  data() {
    return {
      dataList: [],
      loading: false,
    };
  },
  components: {
    GoodsClassifyForm,
  },
  activated() {
    this.refreshList();
  },

  methods: {
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/lhyg/lgy/goodsclassify/goodsClassify/treeData",
        method: "get",
      }).then(({ data }) => {
        this.dataList = data.treeData;
        this.loading = false;
      });
    },
    // 新增下级
    addChild(id, name) {
      this.$refs.goodsClassifyForm.init("addChild", {
        id: "",
        parent: { id: id, name: name },
      });
    },
    // 新增
    add() {
      this.$refs.goodsClassifyForm.init("add", {
        id: "",
        parent: { id: "", name: "" },
      });
    },
    // 修改
    edit(id) {
      this.$refs.goodsClassifyForm.init("edit", {
        id: id,
        parent: { id: "", name: "" },
      });
    },
    // 查看
    view(id) {
      this.$refs.goodsClassifyForm.init("view", {
        id: id,
        parent: { id: "", name: "" },
      });
    },
    // 删除
    del(id) {
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/lhyg/lgy/goodsclassify/goodsClassify/delete",
          method: "delete",
          params: { id: id },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
  },
};
</script>